<template>
    <el-row id="cpts-warn-statistics">
      <el-row v-if="!isViewShow" class="permission">
        没有权限!
      </el-row>
      <el-card v-else class="box-card">
        <div slot="header" class="clearfix">
          <span>告警统计</span>
        </div>

        <!--条件栏-->
        <el-row>
          <el-select @change="onTypeSelectChange" v-model="typeValue" placeholder="请选择">
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select
            @change="onTimeTypeChange"
            v-show="isShowPicker"
            v-model="timeTypeValue" placeholder="请选择">
            <el-option
              v-for="item in timeTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-date-picker
            v-show="isShowPicker"
            :type="pickerType"
            :value-format="dateFormat"
            @change="onPickerChange"
            v-model="selectDate"
            placeholder="选择日期时间">
          </el-date-picker>
          <el-button @click="submitCondition">确定</el-button>
        </el-row>

        <!--图表栏-->
        <el-row class="chart-layout">
          <BaseEchartsComponent ref="cptsWarnLineChart" :id="'cpts_warnlinechart'" :data="barChartsOptions" :time="chartTime" />
        </el-row>
      </el-card>
    </el-row>
</template>

<script>
  import BaseEchartsComponent from "../BaseEcharts/index";
  import myEchartsOptions from '../../chart-options/echartsOptions'
  import {DateTime} from '../../utils/dateTime'
    export default {
        name: "warnStatistics",
      components: {BaseEchartsComponent},
      data(){
          return {
            isViewShow: false,
            isViewEdit: false,
            timeTypeValue: "0",
            timeTypeOptions:[{label:'年',value:"2"},{label:'月',value:"1"},{label:'日',value:"0"}],
            typeValue: 1,
            typeOptions:[{label:'按时间统计',value:1},{label:'按告警规则统计',value:2}],
            barChartsOptions: this.validateGlobal.cloneObject(myEchartsOptions.barChartsOptions),
            pickerType:'date',
            dateFormat:'yyyy-MM-dd',
            selectDate: new DateTime().getDate2(),
            isShowPicker: true,
            chartTime: '',
          }
      },
      mounted(){
        let obj = this.validateGlobal.getPermission(14)
        this.isViewShow = obj.isViewShow
        this.isViewEdit = obj.isViewEdit

        this.barChartsOptions.xAxis[0].data = ["0"]
        this.barChartsOptions.series[0].data = [0]
        this.barChartsOptions.series[0].name = '个数'
        this.barChartsOptions.xAxis[0].axisLabel.textStyle.color = '#000'
        this.barChartsOptions.yAxis[0].axisLabel.textStyle.color = '#000'
        this.barChartsOptions.grid.left = 60
        this.barChartsOptions.grid.right = 60
        // this.lineChartsOptions.title.text = '单位'

        this.askData()
      },
      methods:{
        submitCondition: function(){
          if (this.typeValue === 1) {
            this.askData()
          }else{
            this.askByRuleType()
          }
        },

        onPickerChange: function(date) {
          this.selectDate = date
        },
        onTimeTypeChange: function(value){
          let dateTime = new DateTime()
          this.timeTypeValue = value
          if(value == 2){
            this.selectDate = dateTime.getYear()
            this.pickerType = 'year'
            this.dateFormat = 'yyyy'
          }else if (value == 1){
            this.selectDate = dateTime.getMonth()
            this.pickerType = 'month'
            this.dateFormat = 'yyyy-MM'
          }else{
            this.selectDate = dateTime.getDate2()
            this.pickerType = 'date'
            this.dateFormat = 'yyyy-MM-dd'
          }
        },
        onTypeSelectChange: function(value) {
          this.typeValue = value
          switch (value) {
            case 1:{
              this.isShowPicker = true
              this.timeTypeOptions= [{label:'年',value:"2"},{label:'月',value:"1"},{label:'日',value:"0"}]
              this.timeTypeValue = "0"
              break
            }
            case 2:{
              this.isShowPicker = false
              break
            }
          }
        },
        askData: function() {
          let _that = this
          // let userId = sessionStorage.getItem("userId")
          let gateway = sessionStorage.getItem("gateway")
          let url = _that.ports.warnManage.warnForType
          let askData = {
            // userId: userId,
            sn: gateway,
            time: _that.selectDate,
            type: _that.timeTypeValue
          }
          this.http.get(url,askData, res => {
            if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
              if (res.data) {
                let [arryX,arryY] = [[],[]]
                for (let i = 0;i<res.data.length;++i){
                  arryX[i] = res.data[i].x
                  arryY[i] = res.data[i].y
                  _that.barChartsOptions.xAxis[0].data = arryX
                  _that.barChartsOptions.series[0].data = arryY
                  _that.$nextTick(()=>{
                    _that.$refs.cptsWarnLineChart.drawLineGraph('cpts_warnlinechart',_that.barChartsOptions)
                    _that.chartTime = new Date()
                  })
                }

              }
            }else{
              _that.$message('列表获取失败!');
              _that.clearChart()
            }
          })
        },
        clearChart: function(){
          let _that = this
          _that.barChartsOptions.xAxis[0].data = []
          _that.barChartsOptions.series[0].data = []
          _that.$nextTick(()=>{
            _that.$refs.cptsWarnLineChart.drawLineGraph('cpts_warnlinechart',_that.barChartsOptions)
            _that.chartTime = new Date()
          })
        },
        askByRuleType: function() {
          let _that = this
          let gateway = sessionStorage.getItem("gateway")
          let url = _that.ports.warnManage.warnForRule
          let askData = {
            sn: gateway,
          }
          this.http.get(url,askData, res => {
            if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
              if (res.data) {
                let [arryX,arryY] = [[],[]]
                for (let i = 0;i<res.data.length;++i){
                  arryX[i] = res.data[i].x
                  arryY[i] = res.data[i].y

                  _that.barChartsOptions.xAxis[0].data = arryX
                  _that.barChartsOptions.series[0].data = arryY
                  _that.$nextTick(()=>{
                    _that.$refs.cptsWarnLineChart.drawLineGraph('cpts_warnlinechart',_that.barChartsOptions)
                    _that.chartTime = new Date()
                  })
                }
              }
            }else{
              _that.$message('暂无统计数据!');
              _that.clearChart()
            }
          })
        }
      }
    }
</script>

<style lang="scss">
#cpts-warn-statistics{

  .el-card{
    margin: 20px 20px 0 20px;
    height: 770px;
  }
   .el-card__body{
    overflow:auto;
  }

  .evc-dialog-itemize{
    > :first-child.el-row{
      margin-top: 10px;
      margin-bottom: 20px;
    }
  }

  .evc-submit-layout{
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }

  .chart-layout{
    margin-top: 20px;
  }

  #cpts_warnlinechart{
    height: 580px;
  }
}
</style>
